<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/header::header(null,null)"/>
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">

        <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
        <div th:each="tArticle:${tArticles}">
            <article class="am-g blog-entry-article">

                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color" style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+ ${tArticle.getCreated()}"/>
                    <h2>
                        <!-- 文章标题 -->
                        <div><a style="color: #0f9ae0;font-size: 20px;" th:text="${tArticle.getTitle()}"/>
                        </div>
                    </h2>
                    <!-- 文章内容-->
                    <div style="font-size: 16px;" th:text="${tArticle.getContent()}"/>
                </div>
            </article>
        </div>

        <div class="myLimit">
            <button id="firstPage" value="首页" onclick="jumpto(1)">首页</button>
            <button id="upPage" value="上一页" onclick="jumpto(2)">上一页</button>
            <button id="downPage" value="下一页" onclick="jumpto(3)">下一页</button>
            <button id="lastPage" value="未页" onclick="jumpto(4)">未页</button>
            <input id="totlePage" hidden="hidden" th:value="${totlePage}">
            <input id="page" hidden="hidden" th:value="${page}">
        </div>

    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>子慕</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>

</div>
</body>
<script>
    //获取当前页码数
    let page = $("#page").val();
    //获取总页码数
    let totlePage = $("#totlePage").val();

    //这里写了一个jq主函数  主要用来判断 首页 上一页 下一页 末页 4个按钮 在什么时候该隐藏 是你时候该显示
    $(document).ready(function () {
        let firstPage = $("#firstPage");
        let upPage = $("#upPage")
        let downPage = $("#downPage")
        let lastPage = $("#lastPage")

        //这里做了一些判断 页面原本有 ：首页 上一页 下一页 末页 4个按钮
        //1.如果当前页码就是首页  则 首页的按钮影藏
        //2.如果当前页码大于1 且小于总页码数 则4个按钮都显示
        //3.如果当前页码大于等于总页码数 则下一个按钮影藏...
        if (page == 1 && totlePage > page) {
            firstPage.attr("hidden", true);
            upPage.attr("hidden", true);
            downPage.attr("hidden", false);
            lastPage.attr("hidden", false);
        } else if (page > 1 && totlePage > page) {
            firstPage.attr("hidden", false);
            upPage.attr("hidden", false);
            downPage.attr("hidden", false);
            lastPage.attr("hidden", false);
        } else if (page > 1 && totlePage <= page) {
            firstPage.attr("hidden", false);
            upPage.attr("hidden", false);
            downPage.attr("hidden", true);
            lastPage.attr("hidden", true);
        }
    });

    function jumpto(no) {
        let path = '/blog/blog?';
        //获取的页码数要转换成数字类型  不然会变成字符串拼接 而不是数学加减
        let p = Number(page);
        //1表示首页按钮，2表示上一页，3表示下一页，4表示尾页
        switch (no) {
            case 1:
                window.location.href = path + 'page=' + 1;
                break;
            case 2:
                let i = page - 1;
                window.location.href = path + 'page=' + (p - 1);

                break;
            case 3:
                window.location.href = path + 'page=' + (p + 1);

                break;
            case 4:
                window.location.href = path + 'page=' + totlePage;
                break;

        }

    }


</script>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/footer::footer"/>
</html>


